<template>
  <Form
    class="custom-ivu-form"
    ref="formRef"
    :label-width="120"
    :model="formData"
    :rules="rules"
    @submit.native.prevent="handleFormSubmit"
  >
    <FormItem label="用户名" prop="userName">
      <Input
        v-model="formData.userName"
        :disabled="disabledList.userName"
        placeholder="请输入用户名"
        size="large"
        clearable
      ></Input>
    </FormItem>

    <FormItem label="所属单位" prop="organId">
      <Input
        v-if="disabledList.organId"
        v-model="formData.organName"
        :disabled="disabledList.organId"
        placeholder="请输入用户名"
        size="large"
        clearable
      ></Input>
      <Select v-else v-model="formData.organId" :disabled="disabledList.organId" clearable filterable size="large">
        <Option v-for="(nt, i) of organList" :key="i" :value="nt.key">{{ nt.value }}</Option>
      </Select>
    </FormItem>

    <FormItem label="登录名" prop="userAccount">
      <Input
        v-model="formData.userAccount"
        :disabled="disabledList.userAccount"
        placeholder="请输入"
        size="large"
        clearable
      ></Input>
    </FormItem>

    <FormItem v-if="!hideList.pwd" label="初始密码">
      <Input
        :value="formData.defaultPassword"
        :disabled="disabledList.pwd"
        placeholder="请输入"
        size="large"
        clearable
      ></Input>
    </FormItem>

    <FormItem label="用户角色" prop="roleId">
      <Select v-model="formData.roleId" :disabled="disabledList.roleId" clearable filterable size="large">
        <Option v-for="(nt, i) of roleList" :key="i" :value="nt.roleId">{{ nt.roleName }}</Option>
      </Select>
    </FormItem>

    <Button class="d-none" type="primary" html-type="submit">查询</Button>
  </Form>
</template>

<script>
import { createRules } from './service'
import { createForm } from './service'

// vuex
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('system')
export default {
  name: 'UserForm',

  props: {
    formData: {
      type: Object,
      default() {
        return {}
      },
    },

    disabledList: {
      type: Object,
      default() {
        return {}
      },
    },

    hideList: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  data() {
    return {
      rules: createRules(),
      staticForm: Object.freeze(createForm()),
    }
  },

  computed: {
    organList() {
      return this.$store.getters.organList
    },
    roleList() {
      return this.$store.getters.roleList
    },
  },

  methods: {
     ...mapActions([ 'getOrganList']),

    handleFormSubmit() {
      this.$refs.formRef.validate().then((valid) => {
        if (!valid) return

        const form = {}
        Object.keys(this.staticForm).forEach((key) => {
          form[key] = this.formData[key]
        })

        const organ = this.organList.find((it) => it.key === this.formData.organId)
        // const organName = (organ && organ.value) || this.formData.organId
        const organName = (organ && organ.value) || this.formData.organName
        const data = {
          ...form,
          organName,
          roleName: this.roleList.find((it) => it.roleId === this.formData.roleId).roleName,
        }
        // console.log('organ', { ...this.formData }, data)
        this.$emit('on-user-submit', data)
      })
    },
  },

  mounted() {
    this.roleList
    /* 编辑和新建都用到了，所以请求了两次 */
    this.getOrganList()
  },
}
</script>

<style lang="less" scoped>
.custom-ivu-form {
  width: 90%;
}

.kw-group {
  .kw-group--label {
    position: absolute;
    top: 0;
    left: -80px;
    width: 80px;
    text-align: right;
    padding: 0 12px 0 0;
  }

  .kw-group--oper {
    position: absolute;
    top: 0;
    right: -70px;
    // width: 50px;
    height: 100%;

    .kgo--text {
      vertical-align: -20px;
    }

    .kgo--btn {
      // width: 24px;
      display: inline-flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      padding: 4px 0;
    }
  }
}

/deep/ .ivu-tooltip-light.ivu-tooltip-popper {
  font-size: 14px;
}
</style>
